<template>
  <div class="card-page">
    <tool-bar nav="" :title='action_name + "产品线"'>
      <el-button size="small" @click="$router.push('/dev/product-line/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary"> 保存</el-button>
    </tool-bar>

    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">

          <template #header><span>基本信息</span></template>
          <kv label="产品线名称">
            <el-input v-model="info.name" chk="@chk_cn_name"/>
          </kv>

          <kv label="集群">
            <cluster-ref v-model="info.cluster" id-field="code"></cluster-ref>

            <el-tag style="margin-left:4px;" v-if="info.cluster && info.cluster.code">
              {{ info.cluster.index }}:{{ info.cluster.code }}
            </el-tag>
          </kv>

          <kv label="编码">
            <div>
              <el-input v-model="info.code"
                        chk="@chk_code"
                        chk-msg="长度范围2-7"/>
              <div>只能是小写字母,数字和连字符(-),必须小写字母开头, 用于Redis Key前缀</div>
            </div>
          </kv>


          <kv label="备注">
            <el-input v-model="info.remark"/>
          </kv>

        </el-card>


      </el-col>
      <el-col :span="12">
        <el-card shadow="always">

          <template #header><span>人员信息</span></template>
          <kv label="产品经理">
            <admin-user-ref v-model="info.lm"/>
          </kv>
          <kv label="项目经理">
            <admin-user-ref v-model="info.pm"/>
          </kv>
          <kv label="开发经理">
            <admin-user-ref v-model="info.leader" chk="*"/>
          </kv>
          <kv label="开发人员">
            <admin-user-ref v-model="info.developers" multi/>
          </kv>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2021-04-09 13:44:04
 */
import adminUserRef from "../../admin/admin-user/admin-user-ref.vue"
import clusterRef from "../cluster-info/cluster-info-ref.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()

//定义属性
const $props = defineProps({
  id: {type: String, default: ""},
  action: {type: String, default: ""}
});

const $model = defineModel({type: String});

//定义data
const $data = reactive({
  info: {
    cluster: {id: "", index: ""},
    developers: [],
    clusterName: "default"
  }, //子对象需要声明。
});

const info = $computed(() => $data.info);

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


//定义部分计算属性， 页面绑定时使用（兼容vue2写法）
const action_name = $computed(() => {
  {
    return {add: "添加", edit: "修改"}[$props.action]
  }
});


//定义 onMounted 方法
onMounted(() => {
  loadData();
});


const chk_cn_name = function (value) {
  if (value.length < 2) return '长度>=2';
  if (value.includes(' ')) return '不能包含空格';
  var reg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”\"\\\\/。，、？ ]");
  if (reg.test(value)) {
    return "不能包含特殊字符"
  }
}

const chk_name = function (value) {
  if (value.length.Between(2, 16) == false) return '长度范围2-16';

  for (let i = 0, len = value.length; i < len; i++) {
    let c = value[i];
    let cc = c.charCodeAt();
    if (cc.Between(97, 122) == false && cc.Between(48, 57) == false && c != '-')
      return '必须是小写字母,数字,连字符(-)'
  }
}

const chk_code = function (value) {
  if (value.length.Between(2, 16) == false) return '长度范围2-16';
  if (value[0].charCodeAt().Between(97, 122) == false) return '必须以小写字母开头'

  for (let i = 0, len = value.length; i < len; i++) {
    let c = value[i];
    let cc = c.charCodeAt();
    if (cc.Between(97, 122) == false && cc.Between(48, 57) == false && c != '-')
      return '必须是小写字母,数字,连字符(-)'
  }
}

const loadData = function () {
  if (!$props.id) return;

  jv.$http.post("/dev/product-line/detail/" + $props.id).then(res => {
    $data.info = res.data.data;

    if (!$data.info.cluster.code) {
      $data.info.cluster.code = $data.info.code;
    }
  });
}

const save_click = function () {
  //校验


  jv.$http.post("/dev/product-line/save", $data.info).then(res => {
    //[axios拦截器中已处理了异常]。
    jv.info(action_name + " 成功");
    if ($props.action == "add") {

      jv.$router.push("/dev/product-line/edit/" + res.data.data)
    } else if ($props.action == "edit") {
      jv.$router.push("/dev/product-line/list")
    }
  })
}
</script>
